<!-- 发布堆场 -->
<template>
    <div class="publish-yard"> 
        <el-card>
            <span class="_before">堆场信息</span>
            <el-form ref="ruleFormRef" :model="yardData" :inline="true" label-position="top" label-width="auto" validate-on-rule-change="false" :rules="rules" class="el-form">
                <el-form-item label="所在国家" prop="countryId" style="width: 30%;">
                    <SelectCountry :selectCountryId="yardData.countryId" :index="1" :config="{isIcon:true}" @countryId="selectCountry"></SelectCountry>
                </el-form-item>
                <el-form-item label="所在城市" prop="cityId" style="width: 30%;">
                    <SelectCity :selectCityId="yardData.cityId" :index="1" :config="{}" @cityId="selectCity"></SelectCity>
                </el-form-item> 
                <el-form-item label="港口" prop="yardPort" style="width: 30%;">
                    <el-input v-model="yardData.yardPort" clearable placeholder="请输入港口名" />
                </el-form-item>
                <el-form-item label="堆场名称" prop="yardName" style="width: 30%;">
                    <el-input v-model="yardData.yardName" clearable placeholder="请输入堆场名" />
                </el-form-item>
                <el-form-item label="详细地址" prop="yardAddress" style="width: 30%;">
                    <el-input v-model="yardData.yardAddress" clearable placeholder="请输入详细地址" />
                </el-form-item>
                <el-form-item label="堆场面积" prop="yardArea" style="width: 30%;">
                    <el-input v-model="yardData.yardArea" clearable placeholder="请输入堆场面积" >
                        <template #append>M²</template>
                    </el-input>
                </el-form-item>
                <el-form-item label="吞吐能力" prop="throughputAbility" style="width: 30%;">
                    <el-input v-model="yardData.throughputAbility" clearable placeholder="请输入吞吐能力信息" >
                        <template #append>(箱/月)</template>
                    </el-input>
                </el-form-item>
                <el-form-item label="堆场容量" prop="storageCapacity" style="width: 30%;">
                    <el-input v-model="yardData.storageCapacity" clearable placeholder="请输入容量信息" >
                        <template #append>TEU</template>
                    </el-input>
                </el-form-item>
                <ContactInfo ref="contactTelEmailUpdateRef" :yardContacts="yardData.yardContacts" style="width:100%;"></ContactInfo>
                <el-form-item label="备注" prop="remark" style="width: 100%;">
                    <el-input v-model.trim="yardData.remark" type="textarea" show-word-limit maxlength="1000" rows="2"/>
                </el-form-item>
            </el-form>
        </el-card>
        <el-card class="marginTop20">
            <span class="_before">堆存价信息</span>
            <el-table :data="releaseYardPriceList" border style="width: 70%;margin:50px 0 0 15%;">
                <el-table-column prop="boxType" label="箱型" width="180" align="center">
                    <template  #default="scope">
                        <template v-if="scope.row.boxType == 5">20HQ/GP</template>
                        <template v-if="scope.row.boxType == 10">40HQ/GP</template>
                    </template>
                </el-table-column>
                <el-table-column prop="boxState" label="箱状态" width="180" align="center">
                    <template #default="scope">
                        <el-tag v-if="scope.row.boxState == 5" type="success">空箱</el-tag>
                        <el-tag v-else-if="scope.row.boxState == 10" type="danger">重箱</el-tag>
                    </template>
                </el-table-column>>
                <el-table-column prop="freeStoragePeriod" label="免堆期" align="center">
                    <template #default="scope">
                        <el-input v-model="scope.row.freeStoragePeriod" :formatter="formatterNumber" :parser="formatterNumber"></el-input>
                    </template>
                </el-table-column>
                <el-table-column prop="outHangingFee" label="吊装费" align="center">
                    <template #default="scope">
                        <el-input v-model="scope.row.outHangingFee" :formatter="formatterNumber" :parser="formatterNumber"></el-input>
                    </template>
                </el-table-column>
                <el-table-column prop="storageFee" label="超期费单价（/箱/天）" align="center">
                    <template #default="scope">
                        <el-input v-model="scope.row.storageFee" :formatter="formatterNumber" :parser="formatterNumber"></el-input>
                    </template>
                </el-table-column>
                <el-table-column prop="currency" label="结算币种" align="center">
                    <template #default="scope">
                        <el-select v-model="scope.row.currency">
                            <el-option label="美元" value="USD"></el-option>
                            <el-option label="人民币" value="CNY"></el-option>
                        </el-select>
                    </template>
                </el-table-column>
            </el-table>
        </el-card>
        <el-card class="marginTop20"> 
            <span class="_before" >核心优势</span>
            <el-input v-model.trim="yardData.coreAdvantage" type="textarea" show-word-limit maxlength="1000" rows="5"  style="width: 70%;margin:30px 0 0 15%;display: block;"/>
        </el-card>
        <el-card class="marginTop20"> 
            <span class="_before" >堆存服务</span>
            <el-input v-model.trim="yardData.storageService" type="textarea" show-word-limit maxlength="1000" rows="5"  style="width: 70%;margin:30px 0 0 15%;display: block;"/>
        </el-card>
        <el-card class="marginTop20"> 
            <span class="_before" >修洗服务</span>
            <el-input v-model.trim="yardData.repairWashing" type="textarea" show-word-limit maxlength="1000" rows="5"  style="width: 70%;margin:30px 0 0 15%;display: block;"/>
        </el-card>
        <el-card class="marginTop20"> 
            <span class="_before" >图文描述</span>
            <div class="div-picture">
                <span class="title">
                    主图
                    <span style="display: inline-block; color: #999;font-size: 13px;">请上传1:1主图，主图大小不能超过3M，支持jpg/png格式，建议图片像素高于700*700px</span>
                </span> 
                <PhotoWall :type="'jpg/jpeg/png'" :urlList="yardData.mainFileList" :fileSize="3" :limit="6" @updateInfo="getMainFileList"></PhotoWall>
                <span class="title">详情描述</span>
                <ImageTextEditor ref="editor" :previewHtml="detailFileList"></ImageTextEditor>
            </div>
        </el-card>
        <el-card class="marginTop20">
            <el-row>
                <el-col :span="14" class="text-right"><el-icon><SuccessFilled color="#22A86D"/></el-icon>最后保存于{{formatDate(updateTime,4)}}</el-col>
                <el-col :span="3"  class="text-center"><el-button plain @click="submitYard('tobeReleased')">保存待发布</el-button></el-col>
                <el-col :span="3"  class="text-center"><el-button type="primary" plain @click="submitYard('inWarehouse')">放入已下架</el-button></el-col>
                <el-col :span="3"  class="text-center"><el-button type="success" @click="submitYard('submit')">立即发布</el-button></el-col>
            </el-row>
        </el-card>
    </div>
</template>
<script lang="ts" setup>
import { computed, onMounted, ref , provide} from 'vue'
import { formatDate } from '@/utils'
import SelectCountry from '@/components/citySelect/selectCountry'
import SelectCity from '@/components/citySelect/selectCity'
import ContactInfo from '@/views/components/contactInfo';
import PhotoWall from '@/components/upload/photo-wall'
import ImageTextEditor from '@/components/upload/imageTextEditor'
import validationRules from '@/directive/rulers'
import { tobeReleased, submit, inWarehouse, getYardInfo } from '@/api/yardManage'
import { ElMessage } from 'element-plus';
import { useRoute, useRouter} from 'vue-router'
const router = useRouter();

const route = useRoute()
const ruleFormRef = ref()
const contactTelEmailUpdateRef = ref()
const  yardId = ref() // 编辑堆场时需要传id字段
const yardData = ref({
    countryId: "",
    countryName:"",
    cityId:"",
    cityName:"",
    yardPort:"",
    yardName:"",
    yardAddress:"",
    yardArea:"",
    throughputAbility:"",
    storageCapacity:"",
    yardContacts:"",
    remark:"",
    coreAdvantage:"",
    storageService:"",
    repairWashing:"",
    mainFileList:""

})
const releaseYardPriceList = ref([
    {boxType:"5",boxState:"5",freeStoragePeriod:"1",storageFee:"1",outHangingFee:"1",currency:"USD"},
    {boxType:"5",boxState:"10",freeStoragePeriod:"1",storageFee:"1",outHangingFee:"1",currency:"USD"},
    {boxType:"10",boxState:"5",freeStoragePeriod:"1",storageFee:"1",outHangingFee:"1",currency:"USD"},
    {boxType:"10",boxState:"10",freeStoragePeriod:"1",storageFee:"1",outHangingFee:"1",currency:"USD"}
])

const rules = {
    ...validationRules.yardRuler1
}

const detailFileList = ref()
const updateTime = ref()
onMounted(async()=>{ 
    if(route.query.type =='edit'){  //编辑堆场
        yardId.value = ''
        if(!route.query.id) return ElMessage.warning("堆场信息错误，请刷新页面")
        await getYardInfo(route.query.id).then(res=>{ 
            console.log("resresres",res)
            if(res.code == '00000'){
                const yardInfo = res.data
                yardId.value = yardInfo.id
                yardData.value.countryId = yardInfo.countryId,
                yardData.value.countryName = yardInfo.countryName,
                yardData.value.cityId = yardInfo.cityId,
                yardData.value.cityName = yardInfo.cityName,
                yardData.value.yardPort = yardInfo.yardPort,
                yardData.value.yardName = yardInfo.yardName,
                yardData.value.yardAddress = yardInfo.yardAddress,
                yardData.value.yardArea = yardInfo.yardArea,
                yardData.value.throughputAbility = yardInfo.throughputAbility,
                yardData.value.storageCapacity = yardInfo.storageCapacity,
                yardData.value.yardContacts = yardInfo.yardContacts,
                yardData.value.remark = yardInfo.remark,
                yardData.value.coreAdvantage = yardInfo.coreAdvantage,
                yardData.value.storageService = yardInfo.storageService,
                yardData.value.repairWashing = yardInfo.repairWashing,
                yardData.value.mainFileList= JSON.parse(yardInfo.mainFileList)
                releaseYardPriceList.value = yardInfo.releaseYardPriceList
                detailFileList.value = yardInfo.detailFileList
                updateTime.value = yardInfo.updateTime
                console.log("1111",yardInfo.detailFileList)
                // provide('detailFileList', yardInfo.detailFileList);
                editor.value.setData(yardInfo.detailFileList)
            }
        })
    }
})
// 获取主图
const getMainFileList = (picInfo) =>{
    console.log("getMainFileList",picInfo)
    yardData.value.mainFileList = picInfo
}


const selectCountry = (countryInfo) =>{ 
    yardData.value.countryId = countryInfo
}
const selectCity = (cityInfo) =>{
 yardData.value.cityId = cityInfo
}

// const asdasd = (valeue: any)=>{ 
//     yardData.value.yardContacts = contactTelEmailUpdateRef.value.getContactList()
//     console.log("yardData",yardData.value)
//     console.log("releaseYardPriceList",releaseYardPriceList.value)
// }
const editor = ref()


const submitYard = async(type:string) =>{
    let reqParam = {
        countryId:yardData.value.countryId,
        countryName:yardData.value.countryName,
        cityId:yardData.value.cityId,
        cityName:yardData.value.cityName,
        yardPort:yardData.value.yardPort,
        yardName:yardData.value.yardName,
        yardAddress:yardData.value.yardAddress,
        yardArea:yardData.value.yardArea,
        throughputAbility:yardData.value.throughputAbility,
        storageCapacity:yardData.value.storageCapacity,
        yardContacts:JSON.stringify(contactTelEmailUpdateRef.value.getContactList()),
        remark:yardData.value.remark,
        releaseYardPriceList:releaseYardPriceList.value,
        coreAdvantage:yardData.value.coreAdvantage,
        storageService:yardData.value.storageService,
        repairWashing:yardData.value.repairWashing,
        mainFileList: JSON.stringify(yardData.value.mainFileList),
        detailFileList:editor.value.getContent(),
        lon:'123',
        lat:'12312'

    }
    if(yardId.value){
        reqParam.id = yardId.value
    }
    console.log("reqParamreqParam",reqParam)
    if(type == "tobeReleased"){ //保存待发布
        await tobeReleased(reqParam).then(res=>{
            console.log("tobeReleased",res)
            if(res.code == "00000"){ 
                ElMessage.success("保存待发布成功！")
                router.back()
            }else{ 
                ElMessage.error(res.message)
            }
        })
    }else if(type == "inWarehouse"){ //放入已下架
        await inWarehouse(reqParam).then(res=>{ 
            console.log("inWarehouse",res)
            if(res.code == "00000"){ 
                ElMessage.success("放入已下架成功！")
                router.back()
            }else{ 
                ElMessage.error(res.message)
            } 
        })
    }else if(type == "submit"){  //立即发布
        await submit(reqParam).then(res=>{ 
            console.log("submit",res)
            if(res.code == "00000"){ 
                ElMessage.success("立即发布成功！")
                router.back()
            }else{ 
                ElMessage.error(res.message)
            }
        })
    }

}
const formatterNumber = (value:any) =>{ 
  const val = value.replace(/[^\d.]/g, '').replace(/(\.\d*)\./g, '$1').replace(/^(\d{8})\d+/, '$1').replace(/\.(\d{2})\d+/, '.$1')
  if (val.indexOf('.') === -1) {
    return (val- 0)
  }else {
    const valArr = val.split('.')
    return (valArr[0] - 0).toString() + '.' + valArr[1]
  }
}

</script>
<style lang="scss" scoped>
.publish-yard{
    margin: 20px;
}
.el-form{
    margin: 20px;
}
.div-picture{
    margin: 20px 40px;
    .title{
        font-size: 16px;
        display: block;
        margin:  10px 0;
    }
}


</style>